<template>
	<view class='main-container'>
		<!--头部 搜索框开始-->
		<view class='search'>
			<view class='inp'>
				<image src='../../static/images/search1.png'></image>
				<input placeholder="搜索快递" auto-focus v-model="searchValue" maxlength="15" />
				<image src='../../static/images/close1.png' v-if="searchValue.length!=0" @tap='clear'></image>
			</view>
			<text @tap='search'>搜索</text>
		</view>
		<view class="express" v-for="(item,index) in expresses" :key="index" @tap="go_detail(index)">
					<view class="top">
						<view class="left" @tap.stop="go_userinfo(item.userId)">
							<image :src="getRealPath(item.imgUrl)" mode=""></image>
							<text>{{item.nickName}}</text>
						</view>
						<view class="right">
							<view style=" height: 90upx;width: 100%;margin-top: 10upx; display: flex;flex-direction: row;align-items: center;justify-content:space-between;">
								<view style="flex: 1;display: flex;flex-direction: row;align-items:center;
		">
									<text class="time">{{formatTime(item.createTime)}}</text>
									<view class="remen">
										{{item.type}}</view>
								</view>
								<text class="price">{{item.price}}元 </text>
							</view>
							<view class="ad" style="height: 50upx;">
								<text class="addr">{{item.getAddress}}</text>
							</view>
							<view class="ad">
								<view class="type">取件地址</view><text class="address">{{types[item.expressAddress].siteName}}</text>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view>
							<image src="../../static/images/daxue.png" mode=""></image>
							<text>重庆交通大学</text>
						</view>
						<view>
							<image src="../../static/images/time.png" mode=""></image>
							<text>{{timeAgo(item.createTime)}}</text>
						</view>
					</view>
				</view>
	</view>
</template>

<script>
	import utils from "../../static/js/utils.js";
	export default {
		data() {
			return {
				expresses: [],
				isDis: false,
				searchValue: ''
			}
		},
		methods: {
			go_detail(index){
				let string = JSON.stringify(this.expresses[index]);
				uni.navigateTo({
					url: 'expressdetail?express='+string
				});
			},go_userinfo(userId) {
				uni.navigateTo({
					url: '../usercenter/userinfo?userId=' + userId
				});
			},
			formatTime(timestamp) {
				var da = new Date(timestamp);
				return (da.getMonth() + 1) + "-" + da.getDate() + "  " + da.getHours() + ":" + da.getMinutes();
			},
			timeAgo(dateTimeStamp) {
				var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示
				var hour = minute * 60;
				var day = hour * 24;
				var week = day * 7;
				var halfamonth = day * 15;
				var month = day * 30;
				var now = new Date().getTime(); //获取当前时间毫秒
				var diffValue = now - dateTimeStamp; //时间差

				if (diffValue < 0) {
					return;
				}
				var result = "";
				var minC = diffValue / minute; //计算时间差的分，时，天，周，月
				var hourC = diffValue / hour;
				var dayC = diffValue / day;
				var weekC = diffValue / week;
				var monthC = diffValue / month;
				if (monthC >= 1 && monthC <= 3) {
					result = " " + parseInt(monthC) + "月前"
				} else if (weekC >= 1 && weekC <= 3) {
					result = " " + parseInt(weekC) + "周前"
				} else if (dayC >= 1 && dayC <= 6) {
					result = " " + parseInt(dayC) + "天前"
				} else if (hourC >= 1 && hourC <= 23) {
					result = " " + parseInt(hourC) + "小时前"
				} else if (minC >= 1 && minC <= 59) {
					result = " " + parseInt(minC) + "分钟前"
				} else if (diffValue >= 0 && diffValue <= minute) {
					result = "刚刚"
				} else {
					var datetime = new Date();
					datetime.setTime(dateTimeStamp);
					var Nyear = datetime.getFullYear();
					var Nmonth = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
					var Ndate = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
					var Nhour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
					var Nminute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
					var Nsecond = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
					result = Nyear + "-" + Nmonth + "-" + Ndate
				}
				return result;
			},
			getRealPath(path) {
				return utils.baseImgUrl + path;
			},
			search() {
				this.doSearch(this.searchValue);
			},
			clear() {
				this.searchValue = '';
				this.isDis = false;
			},
			go_work_detail(workId){
				uni.navigateTo({
					url: 'workdetail?workId='+workId
				});
			},
			doSearch(value) {
				if (value.length == 0) {
					return;
				}
				utils.loading("搜索中...");
				this.isDis = true;
				let that = this;
				utils.get("express/search", {
					search: value
				}, function(data) {
					that.expresses = data;
				});
			}
		}

	}
</script>

<style>
	page {
		background-color: #f4f4f4;
	}

	.main-container {
		display: flex;
		width: 100%;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.search {
		width: 100%;
		height: 84upx;
		background-color: #788EFD;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}

	.inp {
		width: 650upx;
		height: 50upx;
		display: flex;
		flex-direction: row;
		background-color: white;
		align-items: center;
		margin-left: 20upx;
		border-radius: 8upx;
		font-size: 26upx;
	}

	.inp image {
		width: 48upx;
		height: 48upx;
	}

	.inp input {
		width: 554upx;
	}

	.search text {
		font-size: 28upx;
		margin-left: 10upx;
		color: white;
	}
	
	.express {
		width: 100%;
		height: 260upx;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		border-radius: 8upx;
		align-items: center;
		margin-bottom: 22upx;
	}
	
	.top {
		flex: 1;
		width: 92%;
		box-shadow: inset 0px -1px 1px -1px #dcdcdc;
		display: flex;
		flex-direction: row;
	}
	
	.left {
		width: 125upx;
		height: 200upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* box-shadow: inset -1px 0px 1px -1px #dcdcdc; */
		justify-content: center;
	}
	
	.left image {
		width: 100upx;
		height: 100upx;
		border-radius: 100upx;
		margin-left: 10upx;
	}
	
	.left text {
		overflow: hidden;
		white-space: nowrap;
		max-width: 84%;
		height: 40upx;
		margin-top: 10upx;
		text-overflow: ellipsis;
		font-size: 24upx;
		margin-left: 10upx;
		text-align: center;
	
	}
	
	.right {
		width: 555upx;
		height: 200upx;
		display: flex;
		margin-left: 70upx;
		flex-direction: column;
	}
	
	.time {
		font-size: 24upx;
		font-family: Arial;
		margin-left: 20upx;
	}
	
	.price {
		color: #788EFD;
		font-size: 40upx;
	}
	
	.address {
		font-size: 28upx;
		overflow: hidden;
		white-space: nowrap;
		height: 40upx;
		max-width: 70%;
		text-overflow: ellipsis;
		font-weight: 600
	}
	
	.addr {
		font-size: 22upx;
		overflow: hidden;
		white-space: nowrap;
		max-width: 70%;
		color: #dcdcdc;
		text-overflow: ellipsis;
		margin-left: 20upx;
	}
	
	.bottom {
		width: 92%;
		height: 60upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.bottom view {
		height: 40upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.bottom view image {
		width: 26upx;
		height: 26upx;
	}
	
	.bottom view text {
		font-size: 22upx;
		color: #999999;
		margin-left: 15upx;
	}
	.remen {
		background: #ee3f4d;
		color: white;
		max-width: 200upx;
		font-size: 22upx;
		padding: 4upx 8upx;
		border-radius: 6upx;
		text-align: center;
		margin-left: 26upx;
	}
	
	.ad {
		height: 70upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		justify-content: flex-start;
	}
	
	.type {
		padding: 2upx 6upx;
		font-size: 22upx;
		border: 1px solid #788EFD;
		margin-left: 15upx;
		border-radius: 6upx;
		color: #788EFD;
		margin-right: 10upx;
	
	}
</style>
